<template>
  <button
    @click="handleEmitClick"
    :disabled="mydisabled"
    class="my-button"
    :class="[
      mytype ? 'my-button-' + mytype : 'my-button-default',
      { 'is-round': round },
      { 'is-plain': plain },
      { 'is-disabled': mydisabled }
    ]"
  >
    <i v-if="icon" class="iconfont" :class="icon"></i>
    <slot>默认按钮</slot>
    <!-- <span v-if="!$slots.default">mytton</span>
    <slot v-else></slot> -->
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    // 样式
    mytype: {
      type: String,
      default: 'default'
    },
    // 按钮禁用
    mydisabled: {
      type: Boolean,
      default: false
    },
    // 圆角属性
    round: {
      type: Boolean,
      default: false
    },
    // 镂空样式
    plain: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleEmitClick (e) {
      // 将点击事件发射出去
      this.$emit('myclick', e)
    }
  }
}
</script>

<style lang="scss" scoped>
.my-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-color: #dcdfe6;
  color: #fff;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.my-button:hover {
  opacity: 0.8;
}
.my-button-default {
  color: #666;
}
.my-button-default:hover {
  opacity: 0.8;
  color: #409eff;
  background-color: #ecf5ff;
}
.my-button-primary {
  background-color: #409eff;
}
.my-button-success {
  background-color: #67c23a;
}
.my-button-info {
  background-color: #a6a9ad;
}
.my-button-warning {
  background-color: #e6a23c;
}
.my-button-danger {
  background-color: #f56c6c;
}
.is-disabled {
  opacity: 0.8;
  cursor: not-allowed;
}
.is-round {
  border-radius: 20px;
}
.is-plain {
  background-color: rgb(253, 233, 197);
  color: #ff9900;
}
.is-plain:hover {
  background-color: #f3ad45;
  color: #fff;
  opacity: 1;
}
</style>
